<template>
  <div class="box">
    <!-- 子通信父：在子组件身上绑定一个自定义事件,子组件通过emit来进行触发即可 -->
    <CommentInput @pubComment="pubComment" />
    <ul>
      <!-- 父通信子：在子组件身上定义自定义属性（props） -->
      <CommentItem :comments="comments" abc="123" @delComment="delComment" />
    </ul>
    <CommentFooter :comments="comments" />
  </div>
</template>

<script setup>

import CommentInput from './components/CommentInput.vue'
import CommentItem from './components/CommentItem.vue'
import CommentFooter from './components/CommentFooter.vue'

// 定义公共的数据源
import { ref, watch, onMounted } from 'vue'
const comments = ref([
  // { id: 1, content: '非常精彩1' },
  // { id: 2, content: '非常精彩2' },
  // { id: 3, content: '非常精彩3' },
])

onMounted(() => {
  comments.value = JSON.parse(localStorage.getItem('comments') || '[]')
})


const pubComment = (data) => {
  // 添加到comments数组
  comments.value.push({ id: Date.now(), content: data })
}

const delComment = (id) => {
  console.log('父亲要删除了', id)
  // 方式1： splice (可变) 
  // let index = comments.value.findIndex(item => item.id === id)
  // comments.value.splice(index, 1)

  // 方式2： filter（不可变，会返回一个新数组，需要覆盖原本comments）
  comments.value = comments.value.filter(item => item.id !== id)
}

// 监听
watch(comments, (newV) => {
  // 写入到本地存储
  localStorage.setItem('comments', JSON.stringify(newV))
}, { deep: true })

</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.box {
  width: 300px;
  margin: 50px auto;
}
</style>